<template>
	<div class="betting-record p-1 bg-bg-3 rounded-2xl">
		<div v-if="slots.header" class="mb-1 py-1 border-b border-border-1">
			<slot name="header"></slot>
		</div>
		<betting-record-header
			class="cursor-pointer"
			:data="data"
			:is-live="isLive"
			:is-combo="isCombo"
			:matchData="matchData"
			@click="onHeaderClick"></betting-record-header>
		<div>
			<betting-record-item
				v-for="item in showSelections"
				:key="item.id"
				:isLiveBet="data.isLiveBet"
				:is-live="isLive"
				:is-new="isNew"
				:is-combo="isCombo"
				:data="item"
				:matchData="matchData"
				:marketData="marketData"
				:selectionData="selectionData"
				class="cursor-pointer"
				@click="onItemClick(item)" />
			<div
				v-if="!showMoreCombo && data.selections.length > 3"
				@click.stop="toggleMoreCombo"
				class="mt-1 h-[34px] rounded flex justify-center items-center bg-bg-3 text-t-2 app-bg-react">
				{{ $t('feed.showMoreCombo', [data.selections.length]) }}
			</div>
		</div>
		<betting-record-footer :data="data" />
		<div v-if="slots.footer" class="mt-1">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
import BettingRecordHeader from './betting-record-header.vue'
import BettingRecordItem from './betting-record-item.vue'
import BettingRecordFooter from './betting-record-footer.vue'
import { ref, computed, PropType, useSlots } from 'vue'
import { FeedType, BetType, BettingSelection } from '@/types'
import { useMatchStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType | BetType>,
		required: true
	},
	isNew: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['match:click'])

const matchStore = useMatchStore()

const slots = useSlots()

const onHeaderClick = () => {
	if (props.data.selections.length === 1) {
		emits('match:click', props.data.selections[0].eventId)
	}
}

const onItemClick = (data: BettingSelection) => {
	emits('match:click', data.eventId)
}

const showMoreCombo = ref(false)

const toggleMoreCombo = () => {
	showMoreCombo.value = !showMoreCombo.value
}

const showSelections = computed(() => {
	const res = props.data.selections
	if (!showMoreCombo.value && res.length > 3) {
		return res.slice(0, 3)
	}
	return res
})

const isCombo = computed(() => props.data.selections.length > 1)

const isLive = computed(() => {
	if (props.data.outcome) {
		return false
	}
	if (matchData.value) {
		return matchData.value.isLive
	}
	return (
		props.data.isLive || (props.data.selections.length === 1 && props.data.selections[0].isLive)
	)
})

const matchData = computed(() => {
	if (props.data.selections.length === 1) {
		const selection = props.data.selections[0]
		return matchStore.getMatch(selection.eventId)
	}
	return null
})

const marketData = computed(() => {
	if (props.data.selections.length === 1) {
		const selection = props.data.selections[0]
		return matchStore.getMarket(selection.eventId, selection.marketId)
	}
	return null
})

const selectionData = computed(() => {
	if (props.data.selections.length === 1) {
		const selection = props.data.selections[0]
		return matchStore.getSelection(selection.eventId, selection.marketId, selection.id)
	}
	return null
})
</script>
